---
sidebar_position: 1
---

# Styles

Properties related to message styling.

import ComponentContainer from '@site/src/components/table/componentContainer';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

### `messageStyles` {#messageStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`default?: MessageRoleStyles`](#MessageRoleStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`image?: MessageRoleStyles`](#MessageRoleStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`audio?: MessageRoleStyles`](#MessageRoleStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`file?: MessageRoleStyles`](#MessageRoleStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`html?: MessageRoleStyles`](#MessageRoleStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`intro?: MessageElementsStyles`](#MessageElementsStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`loading?: MessageElementsStyles`](#MessageElementsStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`error?: MessageElementsStyles`](#MessageElementsStyles) <br />
  \}

Object defining the styling for various message types. <br />
`default` is applied to all message types. <br />
`image` is applied to messages that contain an image. <br />
`audio` is applied to messages that contain an audio player. <br />
`file` is applied to messages that contain a file attachment. <br />
`html` is applied to messages that contain custom elements - [more info](/docs/messages/HTML). <br />
`intro` is applied to the [`introMessage`](/docs/messages#introMessage). <br />
`loading` is applied to the loading bubble. <br />
`error` is applied to error messages. <br />

<LineBreak></LineBreak>

## Types

Shared property types for the [`messageStyles`](#messageStyles) object:

### `MessageRoleStyles` {#MessageRoleStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`shared?: MessageElementsStyles`](#MessageElementsStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`user?: MessageElementsStyles`](#MessageElementsStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`ai?: MessageElementsStyles`](#MessageElementsStyles), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`[custom]?: MessageElementsStyles`](#MessageElementsStyles) <br />
  \}

Object defining the styling for various message roles. <br />
`shared` is applied to all message roles. <br />
`user` is applied to messages from the user. <br />
`ai` is applied to messages returned from the target service. <br />
`custom` roles (e.g. `"bob"`) use `ai` styling, but they can have additional styling. <br />

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      default: {
        shared: {bubble: {color: 'white'}},
        ai: {bubble: {backgroundColor: '#3cbe3c'}},
        user: {bubble: {backgroundColor: '#6767ff'}},
        bob: {bubble: {backgroundColor: '#ffa500'}},
      },
    }}
    initialMessages={[
      {text: 'What is the meaning of life?', role: 'user'},
      {
        text: 'This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.',
        role: 'ai',
      },
      {
        text: 'We dont laugh because we feel good, we feel good because we laugh.',
        role: 'bob',
      },
    ]}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "default": {
      "shared": {"bubble": {"color": "white"}},
      "ai": {"bubble": {"backgroundColor": "#3cbe3c"}},
      "user": {"bubble": {"backgroundColor": "#6767ff"}},
      "bob": {"bubble": {"backgroundColor": "#ffa500"}}
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "default": {
      "shared": {"bubble": {"color": "white"}},
      "ai": {"bubble": {"backgroundColor": "#3cbe3c"}},
      "user": {"bubble": {"backgroundColor": "#6767ff"}},
      "bob": {"bubble": {"backgroundColor": "#ffa500"}}
    }
  }'
  initialMessages='[
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    },
    {
      "text": "We dont laugh because we feel good, we feel good because we laugh.",
      "role": "bob"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `MessageElementsStyles` {#MessageElementsStyles}

- Type: \{<br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`outerContainer?: CustomStyle`](/docs/styles#CustomStyle), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`innerContainer?: CustomStyle`](/docs/styles#CustomStyle), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`bubble?: CustomStyle`](/docs/styles#CustomStyle), <br />
  &nbsp;&nbsp;&nbsp;&nbsp; [`media?: CustomStyle`](/docs/styles#CustomStyle) <br />
  \}

Object defining the styling for various elements that encompass a message. <br />
`outerContainer` contains all elements related to the message. <br />
`innerContainer` is an element inside the `outerContainer` that is mostly used to set message side padding. <br />
`bubble` is the element that displays the actual message contents. <br />
`media` is applied to `image`, `audio` and `file` type messages which contain an extra child element inside the `bubble`
to display the file contents. <br />

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      default: {
        shared: {
          outerContainer: {backgroundColor: 'orange'},
          innerContainer: {backgroundColor: 'yellow'},
          bubble: {color: 'black'},
        },
        ai: {bubble: {backgroundColor: 'lightgreen'}},
        user: {bubble: {backgroundColor: 'lightblue'}},
      },
    }}
    initialMessages={[
      {text: 'What is the meaning of life?', role: 'user'},
      {
        text: 'This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.',
        role: 'ai',
      },
    ]}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "default": {
      "shared": {
        "outerContainer": {"backgroundColor": "orange"},
        "innerContainer": {"backgroundColor": "yellow"},
        "bubble": {"color": "black"}
      },
      "ai": {"bubble": {"backgroundColor": "lightgreen"}},
      "user": {"bubble": {"backgroundColor": "lightblue"}}
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "default": {
      "shared": {
        "outerContainer": {"backgroundColor": "orange"},
        "innerContainer": {"backgroundColor": "yellow"},
        "bubble": {"color": "black"}
      },
      "ai": {"bubble": {"backgroundColor": "lightgreen"}},
      "user": {"bubble": {"backgroundColor": "lightblue"}}
    }
  }'
  initialMessages='[
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

## More Examples

<h3>Files</h3>

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      image: {
        shared: {
          media: {borderRadius: '0px'},
        },
      },
      audio: {
        shared: {
          media: {borderRadius: '30px', border: '1px solid #8c8c8c', backgroundColor: 'red'},
        },
      },
      file: {
        shared: {
          bubble: {backgroundColor: 'grey'},
        },
      },
    }}
    initialMessages={[
      {files: [{src: '/img/city.jpeg', type: 'image'}], role: 'user'},
      {files: [{src: '/audio/cantinaBand.wav', type: 'audio'}], role: 'ai'},
      {files: [{src: '/text/text.txt', type: 'file', name: 'text-file.txt'}], role: 'user'},
    ]}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "image": {
      "shared": {
        "media": {"borderRadius": "0px"}
      }
    },
    "audio": {
      "shared": {
        "media": {"borderRadius": "30px", "border": "1px solid #8c8c8c", "backgroundColor": "red"}
      }
    },
    "file": {
      "shared": {
        "bubble": {"backgroundColor": "grey"}
      }
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "image": {
      "shared": {
        "media": {"borderRadius": "0px"}
      }
    },
    "audio": {
      "shared": {
        "media": {"borderRadius": "30px", "border": "1px solid #8c8c8c", "backgroundColor": "red"}
      }
    },
    "file": {
      "shared": {
        "bubble": {"backgroundColor": "grey"}
      }
    }
  }'
  initialMessages='[
    {"files": [{"src": "path-to-file.jpeg", "type": "image"}], "role": "user"},
    {"files": [{"src": "path-to-file.wav", "type": "audio"}], "role": "ai"},
    {"files": [{"src": "path-to-file.txt", "name": "text-file.txt", "type": "file"}], "role": "user"}
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

:::info
The _"audio"_ media player is controlled by the browser and and its styling may not be overwritable by the `media` property.
:::

:::tip
In the Safari browser, the _"audio"_ media player can be expanded by setting the `width` property in `media` to _200px_ or higher.
:::

<LineBreak></LineBreak>

<h3>Intro message</h3>

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      intro: {
        bubble: {backgroundColor: '#475cc7', color: 'white', fontSize: '16px'},
      },
    }}
    introMessage={{text: 'Hi I am an AiAssistant, ask me anything!'}}
    demo={true}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "intro": {"bubble": {"backgroundColor": "#475cc7", "color": "white", "fontSize": "16px"}}
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "intro": {
      "bubble": {"backgroundColor": "#475cc7", "color": "white", "fontSize": "16px"}
    }
  }'
  introMessage='{"text": "Hi I am an AiAssistant, ask me anything!"}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

<h3>Loading bubble</h3>

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      loading: {
        bubble: {backgroundColor: '#3793ff', fontSize: '20px', color: 'white'},
      },
    }}
    demo={{displayLoadingBubble: true}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "loading": {
      "bubble": {"backgroundColor": "#3793ff", "fontSize": "20px", "color": "white"}
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "loading": {
      "bubble": {"backgroundColor": "#3793ff", "fontSize": "20px", "color": "white"}
    }
  }'
  style="border-radius: 8px"
  demo='{"displayLoadingBubble": true}'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

<h3>Error messages</h3>

<ComponentContainer>
  <DeepChatBrowser
    style={{borderRadius: '8px'}}
    messageStyles={{
      error: {
        bubble: {backgroundColor: '#f98e00', color: 'white', fontSize: '15px'},
      },
    }}
    demo={{displayErrors: {service: true}}}
  ></DeepChatBrowser>
</ComponentContainer>

<Tabs>
<TabItem value="js" label="Sample code">

```html
<deep-chat
  messageStyles='{
    "error": {
      "bubble": {"backgroundColor": "#f98e00", "color": "white", "fontSize": "15px"}
    }
  }'
></deep-chat>
```

</TabItem>
<TabItem value="py" label="Full code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  messageStyles='{
    "error": {
      "bubble": {"backgroundColor": "#f98e00", "color": "white", "fontSize": "15px"}
    }
  }'
  style="border-radius: 8px"
  demo='{"displayErrors": {"service": true}}'
></deep-chat>
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>
